<route lang="json5">
{
  style: {
    navigationBarTitleText: '商品分类',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="category-page">
    <!-- 左侧一级分类，支持滚动 -->
    <scroll-view
      class="category-sidebar"
      scroll-y
      :scroll-into-view="activeSidebarId"
      :style="sidebarStyle"
    >
      <view
        v-for="(item, idx) in categories"
        :key="item.id"
        :id="'sidebar-' + idx"
        :class="['sidebar-item', { active: idx === activeIndex }]"
        @click="onSidebarClick(idx)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <!-- 右侧二级/三级分类 -->
    <view class="category-content">
      <view class="category-title">{{ currentCategory.name }}</view>
      <view class="subcategory-list">
        <view class="subcategory-block" v-for="sub in currentCategory.children" :key="sub.id">
          <view class="subcategory-title">{{ sub.name }}</view>
          <view class="third-category-list">
            <view v-for="third in sub.children" :key="third.id" class="third-category-item">
              <image :src="third.img" class="third-category-img" mode="aspectFit" />
              <view class="third-category-name">{{ third.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 分类数据结构：一级-二级-三级
const categories = ref([
  {
    id: 1,
    name: '家电',
    children: [
      {
        id: 11,
        name: '厨房电器',
        children: [
          { id: 111, name: '电饭煲', img: '/static/images/kitchen-ricecooker.png' },
          { id: 112, name: '微波炉', img: '/static/images/kitchen-microwave.png' },
          { id: 113, name: '电磁炉', img: '/static/images/kitchen-induction.png' },
        ],
      },
      {
        id: 12,
        name: '生活电器',
        children: [
          { id: 121, name: '吸尘器', img: '/static/images/life-vacuum.png' },
          { id: 122, name: '空气净化器', img: '/static/images/life-airpurifier.png' },
        ],
      },
    ],
  },
  {
    id: 2,
    name: '数码',
    children: [
      {
        id: 21,
        name: '耳机',
        children: [
          { id: 211, name: '开放式耳机', img: '/static/images/headphone-open.png' },
          { id: 212, name: '降噪耳机', img: '/static/images/headphone-noise.png' },
          { id: 213, name: '运动耳机', img: '/static/images/headphone-sport.png' },
          { id: 214, name: '蓝牙耳机', img: '/static/images/headphone-bluetooth.png' },
          { id: 215, name: '头戴式耳机', img: '/static/images/headphone-overear.png' },
          { id: 216, name: '入耳式耳机', img: '/static/images/headphone-in-ear.png' },
        ],
      },
      {
        id: 22,
        name: '相机',
        children: [
          { id: 221, name: '单反相机', img: '/static/images/camera-dslr.png' },
          { id: 222, name: '微单相机', img: '/static/images/camera-mirrorless.png' },
        ],
      },
    ],
  },
  {
    id: 3,
    name: '家居',
    children: [
      {
        id: 31,
        name: '家具',
        children: [
          { id: 311, name: '沙发', img: '/static/images/furniture-sofa.png' },
          { id: 312, name: '床', img: '/static/images/furniture-bed.png' },
        ],
      },
    ],
  },
  {
    id: 4,
    name: '男装',
    children: [
      {
        id: 41,
        name: '外套',
        children: [
          { id: 411, name: '夹克', img: '/static/images/men-jacket.png' },
          { id: 412, name: '风衣', img: '/static/images/men-coat.png' },
        ],
      },
    ],
  },
  {
    id: 5,
    name: '生鲜',
    children: [
      {
        id: 51,
        name: '水果',
        children: [
          { id: 511, name: '苹果', img: '/static/images/fruits-apple.png' },
          { id: 512, name: '香蕉', img: '/static/images/fruits-banana.png' },
        ],
      },
    ],
  },
])
const activeIndex = ref(1) // 默认选中"数码"
const currentCategory = computed(() => categories.value[activeIndex.value])

// 滚动到选中项
const activeSidebarId = computed(() => 'sidebar-' + activeIndex.value)
const sidebarStyle = 'height: 100vh;'

function onSidebarClick(idx: number) {
  activeIndex.value = idx
}
</script>

<style lang="scss" scoped>
.category-page {
  display: flex;
  height: 100vh;
  background: #f8f8f8;
}

// 左侧一级分类
.category-sidebar {
  display: flex;
  flex: 3;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  border-right: 1px solid #eee;
  // wotui风格可适当加阴影或圆角
  box-shadow: 2px 0 8px rgba(1, 141, 113, 0.03);
  .sidebar-item {
    padding: 18px 0;
    font-size: 16px;
    color: #666;
    text-align: center;
    transition: all 0.3s;
    &.active {
      font-weight: bold;
      color: #018d71;
      background: #f7f7f7;
      border-left: 4px solid #018d71;
    }
  }
}

// 右侧内容
.category-content {
  flex: 7;
  padding: 16px;
  .category-title {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    color: #018d71;
  }
  .subcategory-list {
    .subcategory-block {
      margin-bottom: 18px;
      .subcategory-title {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
      .third-category-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 12px;
        .third-category-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .third-category-img {
            width: 60px;
            height: 60px;
            margin-bottom: 6px;
            object-fit: contain;
            background: #f5f5f5;
            border-radius: 12px;
          }
          .third-category-name {
            margin-top: 2px;
            font-size: 14px;
            color: #444;
            text-align: center;
          }
        }
      }
    }
  }
}

// 响应式
@media (max-width: 375px) {
  .category-content {
    padding: 8px;
    .third-category-list {
      gap: 10px 6px;
      .third-category-img {
        width: 44px;
        height: 44px;
      }
    }
  }
}
</style>
